<template>
  <div>
    <!--可能用到的排序按钮-->
    <!--<el-card style="margin-bottom: 10px">-->
      <!--&lt;!&ndash;      搜索&ndash;&gt;-->
      <!--<el-row :gutter="20">-->
        <!--<el-col :span="8">-->
          <!--<el-input placeholder="请输入搜索关键词" v-model="searchName" clearable>-->
            <!--<el-button slot="append" icon="el-icon-search" @click="searchMovie"></el-button>-->
          <!--</el-input>-->
        <!--</el-col>-->
        <!--<el-col :span="16" style="text-align: right">-->
          <!--<el-radio-group v-model="sortType" @change="sort">-->
            <!--<el-radio  label="time">按上架时间排序</el-radio>-->
            <!--<el-radio  label="like">按评分排序</el-radio>-->
          <!--</el-radio-group>-->
        <!--</el-col>-->
      <!--</el-row>-->
    <!--</el-card>-->
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="地区">
        <el-radio-group v-model="form.resource">
          <el-radio label="南京"></el-radio>
          <el-radio label="北京"></el-radio>
          <el-radio label="广州"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="租金">
        <el-radio-group v-model="form.resource">
          <el-radio label="不限"></el-radio>
          <el-radio label="500元以下"></el-radio>
          <el-radio label="500-1000元"></el-radio>
          <el-radio label="1000元以上"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="厅室">
        <el-radio-group v-model="form.resource">
          <el-radio label="不限"></el-radio>
          <el-radio label="一室"></el-radio>
          <el-radio label="二室"></el-radio>
          <el-radio label="三室"></el-radio>
          <el-radio label="三室以上"></el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="朝向">
        <el-select v-model="form.region" placeholder="请选择活动区域">
          <el-option label="东" value="shanghai"></el-option>
          <el-option label="南" value="beijing"></el-option>
          <el-option label="西" value="shanghai"></el-option>
          <el-option label="北" value="shanghai"></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <template v-if="movieList.length==0">
      <el-table :data="products" border stripe @row-click="rowclick">
        <el-table-column label="序号" prop="id" width="100"></el-table-column>
        <el-table-column class="pic" label="图片" prop="url" width="200">
          <template  slot-scope="scope">
            <img class="pic" :src="scope.row.img_url">
          </template>
        </el-table-column>
        <el-table-column label="特点" prop="name" >
        </el-table-column>
        <el-table-column label="价格" prop="cost" width="200"></el-table-column>

      </el-table>
    </template>
    <el-card :body-style="{ padding: '5px' }" >
      <!--    分页区域-->
      <el-pagination
        style="margin: 5px;padding: 0px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pagenum"
        :page-sizes="[1, 2, 5,10]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.movieList.length"
        align="center"
      >
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '',
        pagenum: 1,
        pagesize: 5
      },

      products: [
        { id: 1, name: '南京市鼓楼区附近，二室一厅，空间宽松舒适，让人流连忘返。', cost: '2000/月', img_url: 'https://pic1.58cdn.com.cn/anjuke_58/b8c4116735c232379695813d56c30635?w=696&h=522&crop=1&t=1&srotate=1&w=640&h=480&crop=1' },
        { id: 2, name: '南京市栖霞区附近，距2号线南京大学仙林校区地铁站步行728m，交通方便。', cost: '1500/月', img_url: 'https://pic1.58cdn.com.cn/anjuke_58/1914687db2476a05fa838fb95489952f?w=696&h=522&crop=1&t=1&srotate=1&w=640&h=480&crop=1' }
      ],

      sortType: 'time',
      searchName: '',
      movieList: [],
      moviePage: [],
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    }
  },
  created () {
    this.getMovieList()
  },
  methods: {
    handleSizeChange (newSize) {
      this.queryInfo.pagesize = newSize
      this.getMoviePage()
    },

    handleCurrentChange (newPage) {
      this.queryInfo.pagenum = newPage
      this.getMoviePage()
    },
    getMoviePage () {
      this.moviePage = this.movieList.slice((this.queryInfo.pagenum - 1) * this.queryInfo.pagesize, (this.queryInfo.pagenum) * this.queryInfo.pagesize)
    },
    async getMovieList () {
      const res = await this.$http.get('/movie/all/exclude/off')
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        // console.log(res.data.content)
        this.movieList = res.data.content
        this.getMoviePage()
      }
    },
    getDetail (name) {
      this.$router.push({ path: '/movieInfo', query: { movieName: name } })
      // this.$router.push('/movieDetail')
    },
    async searchMovie () {
      const res = await this.$http.get('/movie/search', { params: { keyword: this.searchName } })
      if (res.data.success === false) {
        this.$message.error(res.data.message)
      } else {
        this.movieList = res.data.content
        this.getMoviePage()
        this.$message.success('搜索成功!')
      }
    },
    compare (property) {
      return function (a, b) {
        var value1 = a[property]
        var value2 = b[property]
        return value1 - value2
      }
    },
    compareByTime (property) {
      return function (a, b) {
        var value1 = new Date(a[property])
        var value2 = new Date(b[property])
        return value2 - value1
      }
    },
    sort () {
      if (this.sortType === 'time') { this.movieList.sort(this.compareByTime('startDate')) }
      if (this.sortType === 'like') { this.movieList.sort(this.compare('length')) }
      this.getMoviePage()
    },
    onSubmit () {
      console.log('submit!')
    },
    rowclick () {
      this.$router.push('/movieinfo')
    }
  }
}
</script>

<style scoped>
  .movie-card {
    margin-bottom: 15px;
  }

  .cover {
    width: 150px;
    height: 200px;
  }

  .text {
    margin-bottom: 5px;
  }

  .detail {
    display: flex;
    justify-content: flex-end;
  }

  .btn {
    color: white;
    background-color: #07c4a8;
  }

  .pic{
    height: 80px;
  }
</style>
